<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>汉服社交媒体话题量分析大屏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background: radial-gradient(ellipse at center, #0a0a1e 0%, #050510 100%);
            color: #FFFFFF;
            overflow: hidden;
        }
        
        .dashboard {
            width: 100vw;
            height: 100vh;
            padding: 20px;
            display: flex;
            flex-direction: column;
        }
        
        .top-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 30px;
            background: rgba(10, 15, 40, 0.7);
            border: 1px solid rgba(139, 92, 246, 0.3);
            border-radius: 10px;
            margin-bottom: 20px;
            backdrop-filter: blur(10px);
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
            color: #C8A2FF;
            text-shadow: 0 0 10px rgba(139, 92, 246, 0.8);
        }
        
        h1 {
            font-size: 28px;
            font-weight: bold;
            color: #FFFFFF;
            text-shadow: 0 0 15px rgba(139, 92, 246, 0.6);
        }
        
        .time-filter {
            display: flex;
            gap: 15px;
        }
        
        .time-filter span {
            padding: 8px 20px;
            background: rgba(139, 92, 246, 0.2);
            border: 1px solid rgba(139, 92, 246, 0.4);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .time-filter span:hover {
            background: rgba(139, 92, 246, 0.4);
            transform: translateY(-2px);
        }
        
        .time-filter span.active {
            background: rgba(139, 92, 246, 0.6);
            border-color: #8B5CF6;
            box-shadow: 0 0 15px rgba(139, 92, 246, 0.6);
        }
        
        .content-wrapper {
            flex: 1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto auto 1fr;
            gap: 20px;
        }
        
        .summary-panel {
            grid-column: 1 / -1;
            background: rgba(10, 15, 40, 0.7);
            border: 1px solid rgba(139, 92, 246, 0.3);
            border-radius: 10px;
            padding: 25px;
            backdrop-filter: blur(10px);
        }
        
        .summary-title {
            font-size: 20px;
            color: #C8A2FF;
            margin-bottom: 15px;
            font-weight: bold;
        }
        
        .summary-content {
            font-size: 16px;
            line-height: 1.8;
            color: #E0E0E0;
            text-indent: 2em;
        }
        
        .key-indicators {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .indicator-card {
            background: rgba(10, 15, 40, 0.7);
            border: 1px solid rgba(139, 92, 246, 0.3);
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            transition: all 0.3s ease;
        }
        
        .indicator-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(139, 92, 246, 0.3);
        }
        
        .indicator-icon {
            font-size: 32px;
            margin-bottom: 10px;
            color: #C8A2FF;
        }
        
        .indicator-name {
            font-size: 14px;
            color: #A0A0A0;
            margin-bottom: 8px;
        }
        
        .indicator-value {
            font-size: 24px;
            font-weight: bold;
            color: #FFFFFF;
            text-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
        }
        
        .growth-rate {
            font-size: 12px;
            color: #00FF99;
            margin-top: 5px;
        }
        
        .panel {
            background: rgba(10, 15, 40, 0.7);
            border: 1px solid rgba(139, 92, 246, 0.3);
            border-radius: 10px;
            padding: 20px;
            backdrop-filter: blur(10px);
        }
        
        .panel-title {
            font-size: 18px;
            color: #C8A2FF;
            margin-bottom: 20px;
            font-weight: bold;
            border-bottom: 1px solid rgba(139, 92, 246, 0.3);
            padding-bottom: 10px;
        }
        
        .table-container {
            height: 100%;
            overflow-y: auto;
        }
        
        .data-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .data-table th,
        .data-table td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid rgba(139, 92, 246, 0.2);
        }
        
        .data-table th {
            background: rgba(139, 92, 246, 0.1);
            color: #C8A2FF;
            font-weight: bold;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        
        .data-table tbody tr {
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .data-table tbody tr:hover {
            background: rgba(139, 92, 246, 0.1);
            transform: translateX(5px);
        }
        
        .trend-up {
            color: #00FF99;
        }
        
        .trend-down {
            color: #FF6B6B;
        }
        
        .return-button {
            position: fixed;
            bottom: 30px;
            right: 30px;
            padding: 12px 24px;
            background: rgba(139, 92, 246, 0.8);
            border: 1px solid #8B5CF6;
            border-radius: 8px;
            color: #FFFFFF;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 1000;
            box-shadow: 0 5px 15px rgba(139, 92, 246, 0.5);
        }
        
        .return-button:hover {
            background: rgba(139, 92, 246, 1);
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(139, 92, 246, 0.7);
        }
        
        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: rgba(10, 15, 40, 0.5);
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb {
            background: rgba(139, 92, 246, 0.5);
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: rgba(139, 92, 246, 0.8);
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .panel,
        .summary-panel,
        .indicator-card {
            animation: fadeIn 0.6s ease-out;
        }
        
        .indicator-card:nth-child(1) { animation-delay: 0.1s; }
        .indicator-card:nth-child(2) { animation-delay: 0.2s; }
        .indicator-card:nth-child(3) { animation-delay: 0.3s; }
        .indicator-card:nth-child(4) { animation-delay: 0.4s; }
    </style>
</head>
<body>
<div class="dashboard">
    <!-- 顶部标题 -->
    <header class="top-header">
        <div class="logo">汉服文化数据平台</div>
        <h1>汉服社交媒体话题量深度分析</h1>
        <div class="time-filter">
            <span class="active" data-period="30">近30天</span>
            <span data-period="90">近90天</span>
            <span data-period="365">近1年</span>
        </div>
    </header>
    
    <!-- 主要内容区域 -->
    <div class="content-wrapper">
        <!-- 概述面板 -->
        <div class="summary-panel">
            <div class="summary-title">汉服社交媒体传播概述</div>
            <div class="summary-content">
                汉服文化在社交媒体平台呈现爆发式增长趋势。近30天内，相关话题量突破12.8亿次，覆盖用户超过1.2亿人。其中，微博话题讨论热度最高，抖音短视频传播效果显著，小红书种草笔记成为年轻群体了解汉服文化的重要渠道。各风格汉服中，明制汉服话题讨论量最高，占比达38%。通过持续监测社交媒体话题热度，我们可以实时把握汉服文化传播趋势，为文化推广策略提供数据支撑。
            </div>
        </div>
        
        <!-- 关键指标 -->
        <div class="key-indicators">
            <div class="indicator-card">
                <div class="indicator-icon">📱</div>
                <div class="indicator-name">总话题量</div>
                <div class="indicator-value" id="totalTopics">12.8 亿</div>
                <div class="growth-rate">同比 ↑32.6%</div>
            </div>
            <div class="indicator-card">
                <div class="indicator-icon">👥</div>
                <div class="indicator-name">参与用户</div>
                <div class="indicator-value" id="participatingUsers">1.28 亿</div>
                <div class="growth-rate">同比 ↑28.3%</div>
            </div>
            <div class="indicator-card">
                <div class="indicator-icon">❤️</div>
                <div class="indicator-name">互动量</div>
                <div class="indicator-value" id="interactionCount">4.68 亿</div>
                <div class="growth-rate">同比 ↑35.8%</div>
            </div>
            <div class="indicator-card">
                <div class="indicator-icon">🔥</div>
                <div class="indicator-name">热门话题数</div>
                <div class="indicator-value" id="hotTopicsCount">156</div>
                <div class="growth-rate">同比 ↑22.4%</div>
            </div>
        </div>
        
        <!-- 左侧：社交媒体平台分布 -->
        <div class="panel">
            <div class="panel-title">社交媒体平台话题分布</div>
            <div class="table-container">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>平台</th>
                            <th>话题量</th>
                            <th>占比</th>
                            <th>增长率</th>
                            <th>热门指数</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>微博</td>
                            <td>4.68 亿</td>
                            <td>36.5%</td>
                            <td><span class="trend-up">↑38.2%</span></td>
                            <td>⭐⭐⭐⭐⭐</td>
                        </tr>
                        <tr>
                            <td>抖音</td>
                            <td>3.84 亿</td>
                            <td>30.0%</td>
                            <td><span class="trend-up">↑42.5%</span></td>
                            <td>⭐⭐⭐⭐⭐</td>
                        </tr>
                        <tr>
                            <td>小红书</td>
                            <td>2.21 亿</td>
                            <td>17.3%</td>
                            <td><span class="trend-up">↑56.3%</span></td>
                            <td>⭐⭐⭐⭐</td>
                        </tr>
                        <tr>
                            <td>B站</td>
                            <td>1.54 亿</td>
                            <td>12.0%</td>
                            <td><span class="trend-up">↑45.7%</span></td>
                            <td>⭐⭐⭐⭐</td>
                        </tr>
                        <tr>
                            <td>知乎</td>
                            <td>0.55 亿</td>
                            <td>4.3%</td>
                            <td><span class="trend-up">↑28.9%</span></td>
                            <td>⭐⭐⭐</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- 右侧：热门话题榜单 -->
        <div class="panel">
            <div class="panel-title">热门汉服话题TOP10</div>
            <div class="table-container">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>排名</th>
                            <th>话题名称</th>
                            <th>阅读量</th>
                            <th>讨论量</th>
                            <th>来源平台</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>#中国汉服文化节#</td>
                            <td>2.8 亿</td>
                            <td>125 万</td>
                            <td>微博</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>#汉服穿搭挑战#</td>
                            <td>2.3 亿</td>
                            <td>98 万</td>
                            <td>抖音</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>#明制汉服种草#</td>
                            <td>1.8 亿</td>
                            <td>86 万</td>
                            <td>小红书</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>#汉服日常#</td>
                            <td>1.6 亿</td>
                            <td>75 万</td>
                            <td>全平台</td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>#汉服妆容教程#</td>
                            <td>1.4 亿</td>
                            <td>68 万</td>
                            <td>B站</td>
                        </tr>
                        <tr>
                            <td>6</td>
                            <td>#大唐不夜城汉服#</td>
                            <td>1.2 亿</td>
                            <td>52 万</td>
                            <td>抖音</td>
                        </tr>
                        <tr>
                            <td>7</td>
                            <td>#宋制汉服推荐#</td>
                            <td>1.1 亿</td>
                            <td>45 万</td>
                            <td>小红书</td>
                        </tr>
                        <tr>
                            <td>8</td>
                            <td>#汉服配饰搭配#</td>
                            <td>0.9 亿</td>
                            <td>38 万</td>
                            <td>小红书</td>
                        </tr>
                        <tr>
                            <td>9</td>
                            <td>#汉服文化交流#</td>
                            <td>0.8 亿</td>
                            <td>32 万</td>
                            <td>知乎</td>
                        </tr>
                        <tr>
                            <td>10</td>
                            <td>#汉服与现代时尚#</td>
                            <td>0.7 亿</td>
                            <td>28 万</td>
                            <td>全平台</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    <!-- 返回按钮 -->
    <button class="return-button" onclick="window.history.back()">返回主大屏</button>
</div>

<script>
    // 数据配置
    const dataConfig = {
        30: {
            summary: "汉服文化在社交媒体平台呈现爆发式增长趋势。近30天内，相关话题量突破12.8亿次，覆盖用户超过1.2亿人。其中，微博话题讨论热度最高，抖音短视频传播效果显著，小红书种草笔记成为年轻群体了解汉服文化的重要渠道。各风格汉服中，明制汉服话题讨论量最高，占比达38%。通过持续监测社交媒体话题热度，我们可以实时把握汉服文化传播趋势，为文化推广策略提供数据支撑。",
            indicators: {
                totalTopics: "12.8 亿",
                participatingUsers: "1.28 亿",
                interactionCount: "4.68 亿",
                hotTopicsCount: "156"
            }
        },
        90: {
            summary: "汉服文化在社交媒体平台呈现稳定增长态势。近90天内，相关话题量达到35.2亿次，覆盖用户超过3.5亿人。微博和抖音作为主要传播平台，贡献了超过60%的话题量。小红书平台增长最为迅速，同比增长超过50%。各风格汉服中，明制和唐制汉服的讨论热度持续走高，共同占据了超过65%的话题份额。",
            indicators: {
                totalTopics: "35.2 亿",
                participatingUsers: "3.56 亿",
                interactionCount: "12.85 亿",
                hotTopicsCount: "386"
            }
        },
        365: {
            summary: "汉服文化在社交媒体平台实现了跨越式发展。近一年内，相关话题量突破156.8亿次，覆盖用户超过15亿人次。各社交平台协同发展，形成了完整的传播矩阵。微博、抖音、小红书三大平台贡献了超过85%的话题量。随着传统文化复兴浪潮的推动，汉服文化正逐渐融入现代生活，成为年轻人表达文化自信的重要方式。",
            indicators: {
                totalTopics: "156.8 亿",
                participatingUsers: "15.87 亿",
                interactionCount: "56.32 亿",
                hotTopicsCount: "1258"
            }
        }
    };
    
    // 初始化数据
    function initData(period = "30") {
        const data = dataConfig[period];
        
        // 更新概述内容
        document.querySelector('.summary-content').textContent = data.summary;
        
        // 更新关键指标
        document.getElementById('totalTopics').textContent = data.indicators.totalTopics;
        document.getElementById('participatingUsers').textContent = data.indicators.participatingUsers;
        document.getElementById('interactionCount').textContent = data.indicators.interactionCount;
        document.getElementById('hotTopicsCount').textContent = data.indicators.hotTopicsCount;
    }
    
    // 绑定时间筛选事件
    function bindTimeFilterEvent() {
        const timeSpans = document.querySelectorAll('.time-filter span');
        timeSpans.forEach(span => {
            span.addEventListener('click', function() {
                timeSpans.forEach(s => s.classList.remove('active'));
                this.classList.add('active');
                const period = this.getAttribute('data-period');
                initData(period);
            });
        });
    }
    
    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
        initData();
        bindTimeFilterEvent();
    });
</script>
</body>
</html>